import axios from 'axios'// 封装axios
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
// 配置请求基地址
const request = axios.create({
  // baseURL是所有请求的前缀,基地址
  // baseURL: '/api', // 不要写死,写成变量,让不同的环境,自动变换
  timeout: 5000, // 请求超时时间,超过5秒就报错
  baseURL: process.env.VUE_APP_BASE_API
})

// 请求拦截器(有两个参数,分别是两个回调函数,开始不执行,回过头来在特定的时机执行)
// 第一个回调函数,是请求发送成功以后执行的函数
// 第一个回调函数,是请求发送失败以后执行的函数
request.interceptors.request.use(config => {
  // console.log('1请求成功')
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }
  return config
}, error => {
  // console.log('2.请求失败')
  return Promise.reject(error)
})

// 响应拦截器---在服务器给相应数据到业务之前
// 有两个回调函数参数
// 第一个回调函数,是响应发送成功以后执行的函数
// 第一个回调函数,是响应发送失败以后执行的函数
request.interceptors.response.use(response => {
  // http状态码200 才会走第一个响应拦截器的回调函数
  // 响应成功以后 ,对数据进行脱壳
  // if语句进行业务判断,如果业务失败,应该给用户提示,并且用Promise.reject返回,主要是让我们的业务代码执行chatch里面的代码
  // if(response.data instanceof Blob) return response.data
  if (response.data instanceof Blob) return response.data
  if (response.data.success) {
    return response.data
  } else {
    console.log('业务失败')
    // this.$message('这是一条提示信息') this只能在vue实例也就是.vue的后缀文件里面使用.而我们这里是.js文件不能使用this,或者说下面的this指向undefined
    Message.error({ message: response.data.message })
    return Promise.reject(response)
  }
}, error => {
  // console.log('4.响应失败')
  console.dir(error)
  //
  if (error?.response?.status === 401) {
    store.dispatch('user/logoutAction')
    router.push('/login')
  }
  return Promise.reject(error)
})
export default request
